<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性布局-弹性流动缩写属性(flex layout - flex flow abbreviation attribute)</title>
  <!-- 
    在CSS的flex布局中，flex-flow属性是flex-direction和flex-wrap两个属性的缩写，用于同时设置flex容器的主轴方向和换行方式。
    flex-flow属性的文字说明： 
 
    1. flex-flow: <flex-direction> <flex-wrap> 
      - <flex-direction>：指定主轴的方向，可以是row、row-reverse、column、column-reverse。 
      - <flex-wrap>：指定是否允许flex项目换行，可以是nowrap、wrap、wrap-reverse。 
   -->
   <style>
    .container {
      display: flex;
      background-color: skyblue;
      width: 400px;
      height: 200px;
    }

    .item {
      width: 80px;
      height: 100px;
    }
  </style>
   <style>
    /* 
      flex-flow - 控制flex项目是否换行显示
        - flex-direction - 主轴的x (main axis)方向 
        - flex-wrap - flex项目换行
    */
    /* row and nowrap */
    .display-flex-flow-row-nowrap {
      flex-flow: row nowrap;
    }

    /* row-reverse and nowrap */
    .display-flex-flow-row-reverse-nowrap {
      flex-flow: row-reverse nowrap;
    }

    /* column and nowrap */
    .display-flex-flow-column-nowrap {
      flex-flow: column nowrap;
    }

    /* column-reverse and nowrap */
    .display-flex-flow-column-reverse-nowrap {
      flex-flow: column-reverse nowrap;
    }

    /* ======================================== */

    /* row and wrap */
    .display-flex-flow-row-wrap {
      flex-flow: row wrap;
    }

    /* row-reverse and wrap */
    .display-flex-flow-row-reverse-wrap {
      flex-flow: row-reverse wrap;
    }

    /* column and wrap */
    .display-flex-flow-column-wrap {
      flex-flow: column wrap;
    }

    /* column-reverse and wrap */
    .display-flex-flow-column-reverse-wrap {
      flex-flow: column-reverse wrap;
    }

    /* ======================================== */

    /* row and wrap-reverse */
    .display-flex-flow-row-wrap-reverse {
      flex-flow: row wrap-reverse;
    }

    /* row-reverse and wrap-reverse */
    .display-flex-flow-row-reverse-wrap-reverse {
      flex-flow: row-reverse wrap-reverse;
    }

    /* column and wrap-reverse */
    .display-flex-flow-column-wrap-reverse {
      flex-flow: column wrap-reverse;
    }

    /* column-reverse and wrap-reverse */
    .display-flex-flow-column-reverse-wrap-reverse {
      flex-flow: column-reverse wrap-reverse;
    }
  </style>
</head>
<body>

  <h3>1. row and nowrap</h3>
  <div class="container display-flex-flow-row-nowrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <h3>2. row-reverse and nowrap</h3>
  <div class="container display-flex-flow-row-reverse-nowrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <h3>3. column and nowrap</h3>
  <div class="container display-flex-flow-column-nowrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <h3>4. column-reverse and nowrap</h3>
  <div class="container display-flex-flow-column-reverse-nowrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <h1>-----------------------</h1>

  <h3>1. row and wrap</h3>
  <div class="container display-flex-flow-row-wrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <h3>2. row-reverse and wrap</h3>
  <div class="container display-flex-flow-row-reverse-wrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <h3>3. column and wrap</h3>
  <div class="container display-flex-flow-column-wrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <h3>4. column-reverse and wrap</h3>
  <div class="container display-flex-flow-column-reverse-wrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <h1>-----------------------</h1>

  <h3>1. row and wrap-reverse</h3>
  <div class="container display-flex-flow-row-wrap-reverse">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <h3>2. row-reverse and wrap-reverse</h3>
  <div class="container display-flex-flow-row-reverse-wrap-reverse">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <h3>3. column and wrap-reverse</h3>
  <div class="container display-flex-flow-column-wrap-reverse">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <h3>4. column-reverse and wrap-reverse</h3>
  <div class="container display-flex-flow-column-reverse-wrap-reverse">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <script src="./js/itemRandomColor.js"></script>
 
</body>
</html>